<!--头部导航-->
<template>
  <div class="top-nav">
    <a class="nav-logo-wrapper">
      <img :src="Logo" alt="logo" />
    </a>
    <div class="top-user-info">
      <slot name="changePlatform"></slot>
      <div class="top-user-name">LWY</div>
      <!-- <div class="top-user-name">{{UserName}}</div> -->
      <div class="top-user-image" tabindex="0">
        <img src="../assets/images/咚咚咚.jpg" alt="user-image" />
        <!-- <img :src="UserImage" alt="user-image"> -->
        <div class="top-user-operation" >
          <ul>
            <li class="operation-item">个人信息</li>
            <li class="operation-item">退出登录</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({
  name: "TopNav",
})
export default class extends Vue {
  
  StudentLogo = require("../assets/images/student-logo.png");
  TeacherLogo = require("../assets/images/teacher-logo.png");
  get Logo(): string {
    // 判断学生端或者教师端，返回对应图片
    // if(){
    //    return this.StudentLogo
    // }
    // else{
    //     return this.TeacherLogo
    // }
    return this.StudentLogo;
  }
}
</script>
<style>
.top-nav {
  background-image: url("../assets/images/top-nav.png");
  position: relative;
  width: 100%;
  height: 52px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.nav-logo-wrapper {
  cursor: pointer;
  position: absolute;
  display: inline-block;
  left: 0;
  height: 100%;
}
.nav-logo-wrapper > img {
  height: 100%;
  width: 100%;
}
.top-user-info {
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  right: 50px;
  font-size: 12px;
  color: white;
}
.top-user-info > div {
  display: inline-block;
  margin-left: 7.2px;
}
.top-user-image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.top-user-image > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 30;
}
.top-user-image:focus{
  outline: none;
}
.top-user-image:focus .top-user-operation{
  opacity: 1;
}
.top-user-operation{
  opacity: 0;
  border-radius:3.2px;
  position: absolute;
  transition: opacity 0.5s ease;
  left: -25px;
  top: 37px;
  background: white;
  width: 80px;
  font-size: 12px;
  color: rgb(81,90,110);
  padding:5px 0;
  z-index: 1000;
  box-shadow: 0 0.8px 4.8px 0px rgba(0,0,0,0.2)
  
}

.operation-item{
  display: block;
  text-align: center;
  padding: 5.6px 12.8px;
}
.operation-item:hover{
  background: #f3f3f3
}
</style>